<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	select{
		width: 100px;
		height: 150px;
	}
</style>
</head>
<body>
	<div>
		<select name="lady" id="left" multiple="multiple">
			<option value="朱玲玲">朱玲玲</option>
			<option value="李嘉欣">李嘉欣</option>
			<option value="赵雅芝">赵雅芝</option>
			<option value="张曼玉">张曼玉</option>
		</select>
		<button>&gt;</button>
		<button>&gt;&gt;</button>
		<button>&lt;</button>
		<button>&lt;&lt;</button>
		<select name="beauty" id="right" multiple="multiple">
			
		</select>
	</div>
</body>
<script src="../jquery-3.3.1.min.js"></script>
<script>

	// var left = document.querySelector("#left");
	// var right = document.querySelector("#right");
	// var btn = document.querySelectorAll("button");

	var left = $("#left");
	var right = $("#right");
	var btn = $("button");


	$(btn[0]).click(function(){

	var opt = $("#left>option");

	for(var i = opt.length-1;i>=0;i--){

			if(opt[i].selected == true){

				$(opt[i]).prop = ("selected",true);

				right.append(opt[i]);

			}
		}
	})

	$(btn[2]).click(function(){

		var opt = $("#right>option");

		for(var i = opt.length-1;i>=0;i--){

		if(opt[i].selected == true){

			$(opt[i]).prop = ("selected",false);

			left.append(opt[i]);

			}
		}
	})

	$(btn[1]).click(function(){

		right.html(left.html());

		left.html("");

	})

	$(btn[3]).click(function(){

		left.html(right.html());

		right.html("");
	})

</script>
</html>